<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="搜索，展示">
  <meta name="Description" content="这是个摘要">
  <title>百度首页js</title>
  <style>
	*{
		margin:0;
		padding:0;
		list-style:none;
	}
	  body{
		margin:0;
		padding:0;
		height:100%;
		width:100%;
		}	

	/*导航*/
    .navBox{
		height:30px;
	    width:100%;
        }
		  
	.p_head{
		margin-top:10px;
		float:right;
		font-size:14px;
		margin:auto 0;
		word-spacing:18px;
		height:30px;
    }
	.p_head li{
		float:left;
		word-spacing:18px;
		width:80px;
		height: 32px;
		line-height:32px;
		text-align:center;	
		color:black;
		font-size:18px;
	}
	#gd{
		height:auto;
	}
	
	a:hover{
		background:white;
	}

	.p_head li > a{
		display:block;
		width:100%;
		height:100%;	
		text-decoration:none;
	}
		 
	.p_head li ul{	
		display:none;
	}

	.p_head li ul li{
		float:left;
		word-spacing:18px;
		width:85px;
		height: auto;
		margin: 5px 0;
		text-align:center;
	}	
		
	.cp{
		background:#3366FF;
		opacity:0.8;
	}
	
	a:hover{
		text-decoration:underline;
	}
	
	/*中间*/
	#mid{
		width:100%
		height:400px;
		pisition:relative;
	}
	.mid{
	    width:50%; 
		height:150px;
		margin:auto;
		line-height:150px;
		margin-top:100px; 
		text-align:center;   
		float:center;
    }

    .input {
      width: auto;
      height: 55px;
      position: relative;
	  text-align:center;
    }

    .text {
      border: 1px solid #b6b6b6;
      width: 500px;
      background: #fff;
      height: 33px;
      line-height: 33px;
      font-size: 18px;
      padding: 3px 0 0 7px;
    }

    #btn {
      width: 90px;
      height:39px;
      color: #fff;
      font-size: 16px;
      letter-spacing: 3px;
      background: #3385ff;
      border: 0.5px solid #2d78f4;
      margin-left: -5px;
	  margin-top: -2px;
      opacity:0.9;
    }

    #btn a:hover {
      opacity: 1;
      box-shadow: 0 1px 1px #333;
      cursor: pointer;
	  background:#3385ff;
    }
    
	#btn a{
		text-decoration:none;
	}
		
	#gjz{
		width: 506px;
		border: 1px solid #ccc;
		position: relative;
		list-style:none;
		margin-left:421px;
		height:auto;
	}

	#gjz ul li {
		list-style:none;
		text-align:left;
		height:30px;
	}

	#gjz ul li:hover {
		background-color: #CCC;
	}

	/* 导航转换样式*/
	
	#zj{
		width:1000px;
		height:400px;
		margin-left:300px;
	}
	
	.zj{
		width:800px;;
		height:40px;
		border:1px solid #D8D8D8;
	}
	
	.zj ul li{
		list-style:none;
		float:left;
		width:100px;
		height:40px;
		line-height:40px;
	}
	.zj ul li a{
		text-decoration:none;
		text-align:center;
	}
	.zj ul li:hover{
		background:#E0E0E0;
	}
	
	
	
	#sy,#tj,#dh{
		float:left;
		height:40px;
		width:130px;
		text-align:center;
        line-height:40px;
		font-weight:bold;
		font-size:14px;
	}
	
	.zj li:hover{
		cursor:pointer;
		background:#E0E0E0;
	}
	
	.content{
		width:800px;
		height:400px;
		border:1px solid #D8D8D8;
	}
	.sy-content1{
		padding-left:40px;
		width:720px;
		height:40px;
		font-weight:bold;
		margin:10px auto;
		line-height:40px;
	}
	
	#nr{
		width:780px;
		height:auto;
		line-height:50px;
		padding-left:20px;
		color:blue;
	}
	
	.nr{
		margin-left:20px;
		height:80px;
	}
	.sy-content2{
		padding-left:40px;
		width:720px;
		height:40px;
		font-weight:bold;
		margin:10px auto;
		line-height:40px;
	}
	
	
	#left{
		width:460px;
		height:auto;
	}
	
	
	.tj-content1{
		padding-top:20px;
		width:450px;
		height:auto;;
		font-size:18px;
		
	}
	
	.tj-content1 a{
		text-decoration:none;
		color:black;
	}
	
	.tj-content1 a:hover{
		text-decoration:underline;
		color:bule;
	}
	
	.left1{
		width:220px;
		height:auto;
	}
	
	#img1{
		width:218px;
		height:auto;
		margin-top:10px;
	}
	
	.right1{
		width:240px;
		padding-left:230px;
		margin-top:-215px;
	}
	
	#img2{
		width:218px;
		height:146px;
	}
	
	#left a{
		text-decoration:none;
		color:balck;
	}
	
	#left a:hover{
		text-decoration:underline;
		color:balck;
	}
	
	#right{
		width:250px;
		height:auto;
		margin-left:470px;
		margin-top:-275px;
		font-size:16px;
	}
	
	#right li a{
		text-decoration:none;
		color:black;
	}
	#right ul li a:hover{
		text-decoration:underline;
		color:blue;
	}
	#div1{
		height:20px;
		width:400px;
		margin-top:10px;
		padding-top:10px;
	}
	
	#div2{
		height:25px;
		width:400px;
		margin-top:10px;
	}
	
	#div2 ul{
		float:left;
		
	}
	#div2 ul li{
		float:left;
		width:200px;
		height:25px;
		line-height:25px;
		list-style:none;
	}
	#div3{
		height:25px;
		width:400px;
		margin-top:10px;
	}
	#div3 ul{
		float:left;
	}
	
	#div3 ul li{
		float:left;
		width:200px;
		height:25px;
		line-height:25px;
		list-style:none;
	}
	
	#div4{
		height:25px;
		width:400px;
		margin-top:10px;
	}
	#div4 ul li{
		float:left;
		width:200px;
		height:25px;
		line-height:25px;
		list-style:none;
	}
	#div5{
		height:25px;
		width:400px;
		margin-top:10px;
	}
	#div5 ul li{
		float:left;
		width:200px;
		height:25px;
		line-height:25px;
		list-style:none;
	}
	
	#dh-content{
		width:800px;
		margin-left:80px;
		height:auto;
	}
	
	.dh-content{
		width:800px;
		height:80px;
		margin-top:10px;
	}
	.dh-content ul li{
		float:left;
		width:130px;
		height:80px;
		font-size:14px;
		list-style:none;
	}
	
    /*底部*/
	#foot{
		width:100%;
		heght:500px;
		margin_top:500px;
	}
	
    .ewm{
        width:100%;
        height:60px;    
        margin-top:0px;
		

    }  
   .p_ewm{
        width:60px;
        height:60px;
        margin:0 auto;
        margin-top:10%;
    }
	.foot{
		width:100%;			
		height:50px;			
		margin:0 auto;		
		margin-top:45px;			
		text-align:center;			
		text-indent: 2em;			
		word-spacing:5px;
		color:black;
	}
	
	.p_foot{			
		text-indent: 2em;	
		margin-top:1%;
		font-size:12px;
	}

	#one{
		font-size:12px;
		color:black;
	}

  </style>
  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" />
 </head>
 <body >  
	 <div class="navBox" >
		 <div class="p_head">
		  <ul>
			<li><a href="http://news.baidu.com/" id="xwtr">新闻</a></li>
            <li><a href="https://www.hao123.com/" id="htr"> hao123</a> </li>
            <li><a href="https://map.baidu.com/" id="dttr">地图</a> </li>
            <li><a href="http://v.baidu.com/" id="sptr">视频 </a> </li>
			<li><a href="https://tieba.baidu.com/index.html" id="tbtr">贴吧</a> </li>
            <li><a href="http://xueshu.baidu.com/" id="xstr">学术</a> </li>
            <li><a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5" id="dltr">登录 </a> 
            <li id="gd" onmouseover="display(this)" onmouseout="hide(this)" >
                <a href="javascript:void(0);" class="cp" >更多产品</a>
                <ul > 
					<li><img src="picture.png"/><br/><a id="nuomi" href="http://www.nuomi.com/?cid=002540" name="nuomi"><span class="nuomi">糯米</span></a></li>
					<li><img src="picture.png"/><br/><a id="yinyue" href="http://music.taihe.com" name="yinyue"><span class="yinyue">音乐</span></a></li>
					<li><img src="picture.png"/><br/><a id="tupian" href="http://image.baidu.com" name="tupian"><span class="tupian">图片</span></a></li>
					<li><img src="picture.png"/><br/><a id="zhidao" href="http://zhidao.baidu.com" name="zhidao"><span class="zhidao">知道</span></a></li>
					<li><img src="picture.png"/><br/><a id="wenku" href="http://wenku.baidu.com" name="wenku"><span class="wenku">文库</span></a></li>
					<li><img src="picture.png"/><br/><a id="fyb" href="http://top.baidu.com" name="fyb"><span class="fyb">风云榜</span></a></li>
				</ul>
            </li>
		  </ul>
		</div>
	</div>
		<br/>
	<hr/>
	
<!--中间-->
<div id="mid">
  <!--图片-->
      <div class="mid" >
         <a href="http://www.w3school.com.cn/b.asp" target="_blank">
          <img  height=130 width=270 src="bd_logo1.png" title="百度一下你就知道"/>
          </a>  
      </div>
<!--输入框-->
     <div class="input" id="input">
       <input type="text" id="text" class="text"  autofocus placeholder="请输入关键字">
		  <!--关键字匹配搜索-->
       <button type="button" id="btn"><a href="message.html"> 百度一下</a></button>
    </div>
</div>

<!--中间导航转化-->
<div id="zj">
	<div class="zj" id="centerNav">
		<ul>
			<li id="sy" class="center">我的关注</li>
			<li id="tj" class="center">推荐</li>
			<li id="dh" class="center">导航</li>
		</ul>
	</div>
	<div class="content" >
		<div class="sy-content1">&nbsp;&nbsp;我的导航</div>
		  <p id="nr">焦点新闻</p>
			<ul class="nr">
				<li style="height:30px;"><h5>焦点新闻</h5></li>
				<li style="height:30px;"><h5>焦点新闻</h5></li>
				<li style="height:30px;"><h5>焦点新闻</h5></li>
			</ul>
		
		  <p id="nr">生活消费</p>
			<ul class="nr">
				<li style="height:30px;"><h5>生活消费</h5></li>
				<li style="height:30px;"><h5>生活消费</h5></li>
				<li style="height:30px;"><h5>生活消费</h5></li>
			</ul>
		<div class="sy-content2">&nbsp&nbsp自定义</div>
	</div>
	<div class="content" style="display:none">
		<div id="left">
			<p class="tj-content1"><a href="https://www.baidu.com">
				统计局：前四个月房地产投资保持平稳 后续有支撑</a></p>
			<div class="left1">
			 <a href="#"> 
			 <img src="u=2121802652,3523043489&fm=173&app=49&f=JPEG.jpg" id="img1" ></a>
			<p id="right1"><a href="https://mbd.baidu.com/">
				英特尔再现安全漏洞：2011年后计算机几乎全中枪，可窃取密码数据</a></p></div>
			<div class="right1" ><a href="#">
				<img src="u=3096113355,3796488913&fm=173&app=49&f=JPEG.jpg" id="img2" ></a>
			<p id="right1"><a href="https://mbd.baidu.com/">
			   英特尔再现安全漏洞：2011年后计算机几乎全中枪，可窃取密码数据</a></p></div>
		</div>
		
		<div id="right">
			<div id="div1">
                <ul>
                    <h4>实时热点</h4>
                </ul>
			</div>
					
			<div id="div2">
				<ul>
                    <li><a href="#">张云雷演出被叫停</a></li>
                    <li><a href="#">勇士1-10开拓者</a></li>
                </ul>
			</div>
					
			<div id="div3">
				<ul>
                    <li><a href="#">张云雷演出被叫停</a></li>
                    <li><a href="#">勇士1-10开拓者</a></li>
                </ul>
			</div>
					
			<div id="div4">
				<ul>
                  <li><a href="#">张云雷演出被叫停</a></li>
                    <li><a href="#">勇士1-10开拓者</a></li>
                </ul>
			</div>
			<div id="div5">
				<ul>
                    <li><a href="#">张云雷演出被叫停</a></li>
                    <li><a href="#">勇士1-10开拓者</a></li>
                </ul>
			</div>
					 
		
		</div>
	</div>	
	
	<div class="content" style="display:none;">
		<div id="dh-content">
			<div class="dh-content">
				<ul>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				</ul>
			</div>
			
			<div class="dh-content">
				<ul>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				</ul>
			</div>
			
			<div class="dh-content">
				<ul>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				</ul>
			</div>
			
			<div class="dh-content">
				<ul>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				<li><a href="https://www.baidu.com"><img src="9358d109b3de9c8283eb86356781800a18d843f9.jpg"></a></li>
				</ul>
			</div>
		</div>
	</div>
 </div>
 

 <!--底部-->
 <div id="foot">
<!--二维码-->
    <div class="ewm" >
        <p class="p_ewm" style="margin-left:48%;">
           <img  height=60 width=60 src="zbios_efde696.png" title="我是一个二维码"/><br/>
	&nbsp;&nbsp;百度
        </p>

    </div>

<!--底部链接-->
     <div class="foot">
		<p id="one"> 
		<a href="https://www.baidu.com/cache/sethelp/help.html">把百度设为主页</a>
		 <a href="http://home.baidu.com/">关于百度</a>
		 <a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-irhome">About  Baidu</a>
		 <a href="http://e.baidu.com/?refer=888">百度推广</a>
		</p>

	   <p class="p_foot">
		 ©2019 Baidu
		 <a href="http://jianyi.baidu.com/">使用百度前必读 意见反馈 </a>
		 京ICP证030173号 
		 <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号 </a>
	   </p>
	 </div>
</div>	
	 <!--用js实现显示隐藏-->
	<script> 
	  function display(li){
			var listtr1=li.getElementsByTagName("ul")[0];
			listtr1.style.display='block';
			listtr1.style.background='white';
		}  
		function hide(li){
			var listtr1=li.getElementsByTagName("ul")[0];
			listtr1.style.display='none';
		}
	
	</script> 
	<!--用js实现关键字匹配-->
  	<script>
	var input = document.getElementById("input");
    var text = document.getElementById("text");
    var fruits = ["apple", "pear", "你好", "我是", "window", "大家好", "是","世界","个性设置","beach","百度首页"];
    text.onkeyup = function () {
        var val = this.value;
        var filterArr = [];
        for (var i = 0; i < fruits.length; i++) {
            var fruit = fruits[i];
            if (fruit.indexOf(val) > -1) {
                filterArr.push(fruit);
            }
        }	
        var xz = document.getElementById("gjz");
        if (xz) {
            input.removeChild(xz);
        }
        if (filterArr.length == 0 | val == "") {
            return false;
        }
        
        var adddiv = document.createElement("div");
			adddiv.id = "gjz";
			input.appendChild(adddiv);
        var ul = document.createElement("ul");
			adddiv.appendChild(ul);
        for (var i = 0; i < filterArr.length; i++) {
            var li = document.createElement("li");
            ul.appendChild(li);
            li.innerText = filterArr[i];
        }
	}

  </script>
	<!--用js实现导航之间的转换-->
  <script>
 	var centers = document.getElementsByClassName("center");
 	var contents = document.getElementsByClassName("content");
 	for(var i=0;i<centers.length;i++){
 		centers[i].onclick = function(centerNav)
		 {
 			return function(){
 			  for(var j=0;j<centers.length;j++){
 				 if(j == centerNav){		    
 					contents[j].style.display = "block";	
					contents[j].style.background="#E0E0E0;";
 				 }else{
 					contents[j].style.display = "none";
 				 }
 			  }
 			};
 		}(i);
 	 }	
  </script> 
	 

	 
	 
 </body>
</html>
